<template>
  <div>
    <a-alert message="阿里云OSS" type="info" show-icon style="margin-bottom: 18px">
      <template #description>
        使用阿里云 对象存储OSS，开通地址：<a
          href="https://www.aliyun.com/product/oss?userCode=oeeqid0s"
          target="_blank"
          >点我开通</a
        >
      </template>
    </a-alert>
    <div class="table-page-search-wrapper">
      <a-row type="flex" justify="space-between" align="middle">
        <a-col :span="16">
          <a-form layout="inline" :model="listQuery">
            <a-form-item label="搜索项">
              <a-input v-model:value="listQuery.title" placeholder="输入标题/ID搜索..." />
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="searchSubmit"> 搜索 </a-button>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="8">
          <div style="margin-right: 0px; float: right; display: flex; align-item: center">
            <a-tooltip placement="top">
              <template #title>
                <span>刷新列表</span>
              </template>
              <a-button @click="reloadList">
                <template #icon>
                  <SyncOutlined />
                </template>
              </a-button>
            </a-tooltip>
            <a-button
              v-permission="{ action: 'file_server_add' }"
              type="primary"
              style="margin-left: 12px"
              @click="addNewData"
            >
              <template #icon>
                <PlusOutlined />
              </template>
              新增文件存储配置
            </a-button>
          </div>
        </a-col>
      </a-row>
    </div>
    <a-table
      :columns="columns"
      :rowKey="(record) => record._id"
      :dataSource="dataList.data"
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #status="{ text: record }">
        <a-tag v-if="record == 1" color="green">启用</a-tag>
        <a-tag v-if="record == 0" color="red">关闭</a-tag>
      </template>
      <template #action="{ text: record }">
        <a v-permission="{ action: 'file_server_add' }" @click="file_server_edit(record)">
          <EditOutlined /> 编辑
        </a>
        <a-divider v-permission="{ action: 'file_server_ext' }" type="vertical" />
        <a-dropdown>
          <a v-permission="{ action: 'file_server_ext' }" class="ant-dropdown-link">
            更多
            <DownOutlined />
          </a>
          <template #overlay>
            <a-menu>
              <a-menu-item v-permission="{ action: 'file_server_copy' }">
                <a @click="file_server_copy(record)"> <CopyOutlined /> 复制 </a>
              </a-menu-item>
              <a-menu-item v-permission="{ action: 'file_server_del' }" style="color: red">
                <a @click="file_server_delete(record)"> <DeleteOutlined /> 删除 </a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </template>
    </a-table>
    <a-drawer
      width="50%"
      :title="drawerTitle"
      placement="right"
      :open="drawerShow"
      @close="
        () => {
          drawerShow = false
        }
      "
    >
      <template #extra>
        <a-button
          style="margin-right: 8px"
          @click="
            () => {
              drawerShow = false
            }
          "
          >取消</a-button
        >
        <a-button type="primary" @click="addServer">提交</a-button>
      </template>
      <a-form
        ref="formRef"
        :model="FormState"
        :rules="FormRule"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-tabs v-model:activeKey="activeKey" type="card">
          <a-tab-pane key="tab1" tab="文件存储设置">
            <a-form-item label="标题" has-feedback required name="title">
              <a-input v-model:value="FormState.title" placeholder="请输入标题" />
            </a-form-item>
            <a-form-item label="存储平台" name="platform">
              <a-radio-group v-model:value="FormState.platform">
                <a-radio key="aliyun_oss" value="aliyun_oss">阿里云OSS</a-radio>
                <a-radio key="tencent_cos" value="tencent_cos">腾讯云COS</a-radio>
                <a-radio key="qiniu" value="qiniu">七牛云</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="配置状态" has-feedback required name="status">
              <a-radio-group v-model:value="FormState.status">
                <a-radio :key="1" :value="1">启用</a-radio>
                <a-radio :key="0" :value="0">关闭</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              v-if="FormState.status === 0"
              label="关闭说明"
              has-feedback
              required
              name="close_msg"
            >
              <a-input v-model:value="FormState.close_msg" placeholder="请输入配置关闭说明" />
            </a-form-item>
          </a-tab-pane>
          <a-tab-pane v-if="FormState.platform == 'aliyun_oss'" key="tab2" tab="阿里云OSS设置">
            <a-form-item label="凭证来源" has-feedback required name="ak_from">
              <a-radio-group v-model:value="FormState.ak_from">
                <a-radio key="platform" value="platform">在[凭证管理]中选择</a-radio>
                <a-radio key="alone" value="alone">单独设置</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item v-if="FormState.ak_from == 'platform'" label="选择凭证" name="ak_id">
              <a-select
                v-model:value="FormState.ak_id"
                show-search
                placeholder="可搜索选择"
                style="width: 100%"
                :default-active-first-option="false"
                :show-arrow="true"
                :filter-option="false"
                :options="akList"
                :fieldNames="{ value: '_id', label: 'title' }"
                @search="searchInput"
              >
                <template #notFoundContent>
                  <a-empty
                    image="https://img.alicdn.com/imgextra/i3/573804794/O1CN01IO097G1lHhdtoisyG_!!573804794.png"
                    :image-style="{
                      height: '90px'
                    }"
                  >
                    <template #description>
                      <view style="color: rgba(0, 0, 0, 0.88); padding-top: 20px">
                        暂无可选项，请先
                        <router-link :to="{ name: 'AkManage' }" target="_blank">添加</router-link>
                      </view>
                    </template>
                  </a-empty>
                </template>
              </a-select>
            </a-form-item>
            <a-form-item
              v-if="FormState.ak_from == 'alone'"
              label="AccessKeyId"
              name="aliyun_key_id"
            >
              <a-input v-model:value="FormState.aliyun_key_id" placeholder="请填写">
                <template #suffix>
                  <a href="https://ram.console.aliyun.com/manage/ak" target="_blank">
                    <a-tooltip title="点击跳转官网获取">
                      <QuestionCircleOutlined />
                    </a-tooltip>
                  </a>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item
              v-if="FormState.ak_from == 'alone'"
              label="AccessKeySecret"
              name="aliyun_key_secret"
            >
              <a-input v-model:value="FormState.aliyun_key_secret" placeholder="请填写">
                <template #suffix>
                  <a href="https://ram.console.aliyun.com/manage/ak" target="_blank">
                    <a-tooltip title="点击跳转官网获取">
                      <QuestionCircleOutlined />
                    </a-tooltip>
                  </a>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="存储空间" name="aliyun_bucket">
              <a-input v-model:value="FormState.aliyun_bucket" placeholder="请填写存储空间(Bucket)">
                <template #suffix>
                  <a href="https://oss.console.aliyun.com/bucket" target="_blank">
                    <a-tooltip title="点击跳转官网获取">
                      <QuestionCircleOutlined />
                    </a-tooltip>
                  </a>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="地域" name="aliyun_region">
              <a-select v-model:value="FormState.aliyun_region" placeholder="请选择地域">
                <a-select-option key="oss-cn-hangzhou">华东1（杭州）</a-select-option>
                <a-select-option key="oss-cn-shanghai">华东2（上海）</a-select-option>
                <a-select-option key="oss-cn-qingdao">华北1（青岛）</a-select-option>
                <a-select-option key="oss-cn-beijing">华北2（北京）</a-select-option>
                <a-select-option key="oss-cn-zhangjiakou">华北3（张家口）</a-select-option>
                <a-select-option key="oss-cn-huhehaote">华北5（呼和浩特）</a-select-option>
                <a-select-option key="oss-cn-wulanchabu">华北6（乌兰察布）</a-select-option>
                <a-select-option key="oss-cn-shenzhen">华南1（深圳）</a-select-option>
                <a-select-option key="oss-cn-heyuan">华南2（河源）</a-select-option>
                <a-select-option key="oss-cn-guangzhou">华南3（广州）</a-select-option>
                <a-select-option key="oss-cn-chengdu">西南1（成都）</a-select-option>
                <a-select-option key="oss-cn-hongkong">中国（香港）</a-select-option>
                <a-select-option key="oss-us-west-1">美国西部1（硅谷）</a-select-option>
                <a-select-option key="oss-us-east-1">美国东部1（弗吉尼亚）</a-select-option>
                <a-select-option key="oss-ap-southeast-1">亚太东南1（新加坡）</a-select-option>
                <a-select-option key="oss-ap-southeast-2">亚太东南2（悉尼）</a-select-option>
                <a-select-option key="oss-ap-southeast-3">亚太东南3（吉隆坡）</a-select-option>
                <a-select-option key="oss-ap-southeast-5">亚太东南5（雅加达）</a-select-option>
                <a-select-option key="oss-ap-northeast-1">亚太东北1（日本）</a-select-option>
                <a-select-option key="oss-ap-south-1">亚太南部1（孟买）</a-select-option>
                <a-select-option key="oss-eu-central-1">欧洲中部1（法兰克福）</a-select-option>
                <a-select-option key="oss-eu-west-1">英国（伦敦）</a-select-option>
                <a-select-option key="oss-me-east-1">中东东部1（迪拜）</a-select-option>
                <template #suffix>
                  <a href="https://oss.console.aliyun.com/bucket" target="_blank">
                    <a-tooltip title="点击跳转官网获取">
                      <QuestionCircleOutlined />
                    </a-tooltip>
                  </a>
                </template>
              </a-select>
            </a-form-item>
            <a-form-item label="图片处理样式名" name="aliyun_stylename">
              <a-input v-model:value="FormState.aliyun_stylename" placeholder="请填写">
                <template #suffix>
                  <a-tooltip
                    title="针对OSS内存储的图片文件（Object），您可以在GetObject请求中携带图片处理参数对图片文件进行处理。例如添加图片水印、转换格式等。"
                  >
                    <QuestionCircleOutlined />
                  </a-tooltip>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="读写权限" has-feedback required name="aliyun_alc">
              <a-radio-group v-model:value="FormState.aliyun_alc">
                <a-tooltip title="对文件的所有访问操作需要进行身份验证。">
                  <a-radio key="private" value="private">私有</a-radio>
                </a-tooltip>
                <a-tooltip
                  title="只有该存储空间的拥有者可以对该存储空间内的文件进行写操作，任何人（包括匿名访问者）都可以对该存储空间中的文件进行读操作。"
                >
                  <a-radio key="open_read" value="open_read">公共读</a-radio>
                </a-tooltip>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="内网上传">
              <a-switch
                v-model:checked="FormState.aliyun_is_internal_upload_bool"
                checked-children="开"
                un-checked-children="关"
              />
            </a-form-item>
            <a-form-item label="自定义外网地址">
              <a-switch
                v-model:checked="FormState.aliyun_is_define_url_bool"
                checked-children="是"
                un-checked-children="否"
              />
            </a-form-item>
            <a-form-item
              v-show="FormState.aliyun_is_define_url_bool"
              label="外网地址"
              name="web_url"
            >
              <a-textarea
                v-model:value="FormState.aliyun_web_url"
                placeholder="请填写自定义外网访问地址"
                :rows="2"
              />
            </a-form-item>
          </a-tab-pane>
          <a-tab-pane v-if="FormState.platform == 'tencent_cos'" key="tab3" tab="腾讯云COS设置">
            <a-form-item label="凭证来源" has-feedback required name="ak_from">
              <a-radio-group v-model:value="FormState.ak_from">
                <a-radio key="platform" value="platform">在[凭证管理]中选择</a-radio>
                <a-radio key="alone" value="alone">单独设置</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item v-if="FormState.ak_from == 'platform'" label="选择凭证" name="ak_id">
              <a-select
                v-model:value="FormState.ak_id"
                show-search
                placeholder="请选择(支持搜索)"
                style="width: 100%"
                :default-active-first-option="false"
                :show-arrow="true"
                :filter-option="false"
                :options="akList"
                :fieldNames="{ value: '_id', label: 'title' }"
                @search="searchInput"
              >
                <template #notFoundContent>
                  <a-empty
                    image="https://img.alicdn.com/imgextra/i3/573804794/O1CN01IO097G1lHhdtoisyG_!!573804794.png"
                    :image-style="{
                      height: '90px'
                    }"
                  >
                    <template #description>
                      <view style="color: rgba(0, 0, 0, 0.88); padding-top: 20px">
                        暂无可选项，请先
                        <router-link :to="{ name: 'AkManage' }" target="_blank">添加</router-link>
                      </view>
                    </template>
                  </a-empty>
                </template>
              </a-select>
            </a-form-item>
            <a-form-item
              v-if="FormState.ak_from == 'alone'"
              label="腾讯云SecretId"
              name="tenc_secret_id"
            >
              <a-input v-model:value="FormState.tenc_secret_id" placeholder="请填写密钥ID">
                <template #suffix>
                  <a href="https://console.cloud.tencent.com/cam/capi" target="_blank">
                    <a-tooltip title="点击跳转官网获取">
                      <QuestionCircleOutlined />
                    </a-tooltip>
                  </a>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item
              v-if="FormState.ak_from == 'alone'"
              label="腾讯云SecretKey"
              name="tenc_secret_key"
            >
              <a-input
                v-model:value="FormState.tenc_secret_key"
                placeholder="请填写访问密钥"
                :rows="2"
              >
                <template #suffix>
                  <a href="https://console.cloud.tencent.com/cam/capi" target="_blank">
                    <a-tooltip title="点击跳转官网获取">
                      <QuestionCircleOutlined />
                    </a-tooltip>
                  </a>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="存储桶名称" name="tenc_bucket">
              <a-input v-model:value="FormState.tenc_bucket" placeholder="请填写存储桶名称">
                <template #suffix>
                  <a href="https://console.cloud.tencent.com/cos5/bucket" target="_blank">
                    <a-tooltip title="点击跳转官网获取">
                      <QuestionCircleOutlined />
                    </a-tooltip>
                  </a>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="所属地域" name="tenc_region">
              <a-select v-model:value="FormState.tenc_region" placeholder="请选择地域">
                <a-select-option key="ap-beijing-1" value="ap-beijing-1">
                  北京一区
                </a-select-option>
                <a-select-option key="ap-beijing" value="ap-beijing"> 北京 </a-select-option>
                <a-select-option key="ap-guangzhou" value="ap-guangzhou"> 广州 </a-select-option>
                <a-select-option key="ap-nanjing" value="ap-nanjing"> 南京 </a-select-option>
                <a-select-option key="ap-shanghai" value="ap-shanghai"> 上海 </a-select-option>
                <a-select-option key="ap-chengdu" value="ap-chengdu"> 成都 </a-select-option>
                <a-select-option key="ap-chongqing" value="ap-chongqing"> 重庆 </a-select-option>
                <a-select-option key="ap-shenzhen-fsi" value="ap-shenzhen-fsi">
                  深圳金融
                </a-select-option>
                <a-select-option key="ap-shanghai-fsi" value="ap-shanghai-fsi">
                  上海金融
                </a-select-option>
                <a-select-option key="ap-beijing-fsi" value="ap-beijing-fsi">
                  北京金融
                </a-select-option>
                <a-select-option key="ap-hongkong" value="ap-hongkong"> 香港 </a-select-option>
                <a-select-option key="ap-singapore" value="ap-singapore"> 新加坡 </a-select-option>
                <a-select-option key="ap-mumbai" value="ap-mumbai"> 孟买 </a-select-option>
                <a-select-option key="ap-jakarta" value="ap-jakarta"> 雅加达 </a-select-option>
                <a-select-option key="ap-seoul" value="ap-seoul"> 首尔 </a-select-option>
                <a-select-option key="ap-bangkok" value="ap-bangkok"> 曼谷 </a-select-option>
                <a-select-option key="ap-tokyo" value="ap-tokyo"> 东京 </a-select-option>
                <a-select-option key="na-siliconvalley" value="na-siliconvalley">
                  硅谷（美西）
                </a-select-option>
                <a-select-option key="na-ashburn" value="na-ashburn">
                  弗吉尼亚（美东）
                </a-select-option>
                <a-select-option key="na-toronto" value="na-toronto"> 多伦多 </a-select-option>
                <a-select-option key="sa-saopaulo" value="sa-saopaulo"> 圣保罗 </a-select-option>
                <a-select-option key="eu-frankfurt" value="eu-frankfurt">
                  法兰克福
                </a-select-option>
                <a-select-option key="eu-moscow" value="eu-moscow"> 莫斯科 </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="读写权限" has-feedback required name="tenc_alc">
              <a-radio-group v-model:value="FormState.tenc_alc">
                <a-tooltip title="对文件的所有访问操作需要进行身份验证。">
                  <a-radio key="private" value="private">私有</a-radio>
                </a-tooltip>
                <a-tooltip
                  title="只有该存储空间的拥有者可以对该存储空间内的文件进行写操作，任何人（包括匿名访问者）都可以对该存储空间中的文件进行读操作。"
                >
                  <a-radio key="open_read" value="open_read">公共读</a-radio>
                </a-tooltip>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="自定义外网地址">
              <a-switch
                v-model:checked="FormState.tenc_is_define_url_bool"
                checked-children="是"
                un-checked-children="否"
              />
            </a-form-item>
            <a-form-item
              v-show="FormState.tenc_is_define_url_bool"
              label="外网地址"
              name="tenc_web_url"
            >
              <a-textarea
                v-model:value="FormState.tenc_web_url"
                placeholder="请填写自定义外网访问地址"
                :rows="2"
              />
            </a-form-item>
          </a-tab-pane>
          <a-tab-pane v-if="FormState.platform == 'qiniu'" key="tab4" tab="七牛云对象存储设置">
            <a-form-item label="凭证来源" has-feedback required name="ak_from">
              <a-radio-group v-model:value="FormState.ak_from">
                <a-radio key="platform" value="platform">在[凭证管理]中选择</a-radio>
                <a-radio key="alone" value="alone">单独设置</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item v-if="FormState.ak_from == 'platform'" label="选择凭证" name="ak_id">
              <a-select
                v-model:value="FormState.ak_id"
                show-search
                placeholder="请选择(支持搜索)"
                style="width: 100%"
                :default-active-first-option="false"
                :show-arrow="true"
                :filter-option="false"
                :options="akList"
                :fieldNames="{ value: '_id', label: 'title' }"
                @search="searchInput"
              >
                <template #notFoundContent>
                  <a-empty
                    image="https://img.alicdn.com/imgextra/i3/573804794/O1CN01IO097G1lHhdtoisyG_!!573804794.png"
                    :image-style="{
                      height: '90px'
                    }"
                  >
                    <template #description>
                      <view style="color: rgba(0, 0, 0, 0.88); padding-top: 20px">
                        暂无可选项，请先
                        <router-link :to="{ name: 'AkManage' }" target="_blank">添加</router-link>
                      </view>
                    </template>
                  </a-empty>
                </template>
              </a-select>
            </a-form-item>
            <a-form-item v-if="FormState.ak_from == 'alone'" label="AK" name="qiniu_ak">
              <a-input v-model:value="FormState.qiniu_ak" placeholder="请填写七牛云AK">
                <template #suffix>
                  <a href="https://portal.qiniu.com/user/key" target="_blank">
                    <a-tooltip title="点击跳转官网获取">
                      <QuestionCircleOutlined />
                    </a-tooltip>
                  </a>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item v-if="FormState.ak_from == 'alone'" label="SK" name="qiniu_sk">
              <a-input v-model:value="FormState.qiniu_sk" placeholder="请填写七牛云SK">
                <template #suffix>
                  <a href="https://portal.qiniu.com/user/key" target="_blank">
                    <a-tooltip title="点击跳转官网获取">
                      <QuestionCircleOutlined />
                    </a-tooltip>
                  </a>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="存储区域" name="qiniu_region">
              <a-select v-model:value="FormState.qiniu_region" placeholder="请选择地域">
                <a-select-option key="z0">华东-浙江</a-select-option>
                <a-select-option key="cn-east-2">华东-浙江2</a-select-option>
                <a-select-option key="z1">华北-河北</a-select-option>
                <a-select-option key="z2">华南-广东</a-select-option>
                <a-select-option key="na0">北美-洛杉矶</a-select-option>
                <a-select-option key="as0">亚太-新加坡（原东南亚）</a-select-option>
                <a-select-option key="ap-northeast-1">亚太-首尔</a-select-option>
                <template #suffix>
                  <a href="https://portal.qiniu.com/kodo/bucket" target="_blank">
                    <a-tooltip title="点击跳转官网获取">
                      <QuestionCircleOutlined />
                    </a-tooltip>
                  </a>
                </template>
              </a-select>
            </a-form-item>
            <a-form-item label="空间名称" name="qiniu_bucket">
              <a-input v-model:value="FormState.qiniu_bucket" placeholder="请输入空间名称">
                <template #suffix>
                  <a href="https://portal.qiniu.com/user/key" target="_blank">
                    <a-tooltip title="点击跳转官网获取">
                      <QuestionCircleOutlined />
                    </a-tooltip>
                  </a>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="自定义域名" name="qiniu_url">
              <a-input v-model:value="FormState.qiniu_url" placeholder="请填写自定义外网访问域名">
                <template #suffix>
                  <a href="https://portal.qiniu.com/cdn/domain" target="_blank">
                    <a-tooltip title="点击跳转官网获取">
                      <QuestionCircleOutlined />
                    </a-tooltip>
                  </a>
                </template>
              </a-input>
            </a-form-item>
          </a-tab-pane>
          <a-tab-pane key="tab10" tab="对接密钥">
            <a-form-item label="SecretKey" name="server_secret">
              <a-input-search
                v-model:value="FormState.server_secret"
                placeholder="点击右侧“获取密钥”按钮进行获取"
                enter-button="获取密钥"
                @search="resetSecret"
              />
            </a-form-item>
          </a-tab-pane>
        </a-tabs>
      </a-form>
    </a-drawer>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, ref, watch } from 'vue'
import {
  Row,
  Col,
  Modal,
  Divider,
  Image,
  Drawer,
  Switch,
  InputPassword,
  InputNumber,
  Tabs,
  TabPane
} from 'ant-design-vue'
import {
  SyncOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  DownOutlined,
  CopyOutlined,
  QuestionCircleOutlined
} from '@ant-design/icons-vue'
import { delServerItem, getServerList, editServerInfo } from '@/api/file'
import { randomString, inArray } from '@/utils/common'
import { useRouter } from 'vue-router'
import { requestFailed, requestSuccess } from '@/utils/feedback'
import { getAllServerList, getAllTplList } from '@/api/sms'
import { getAllItem } from '@/api/mpweixin'
import {
  getAllServerList as getEmailServerList,
  getAllTplList as getAllEmailTpl
} from '@/api/email'
import { getAllAkList } from '@/api/ak'

export default defineComponent({
  name: 'AdsList',
  components: {
    SyncOutlined,
    PlusOutlined,
    DownOutlined,
    CopyOutlined,
    EditOutlined,
    QuestionCircleOutlined,
    DeleteOutlined,
    [Tabs.name]: Tabs,
    [TabPane.name]: TabPane,
    [Modal.name]: Modal,
    [Row.name]: Row,
    [Drawer.name]: Drawer,
    [Switch.name]: Switch,
    [InputPassword.name]: InputPassword,
    [InputNumber.name]: InputNumber,
    [Col.name]: Col,
    [Image.name]: Image,
    [Divider.name]: Divider
  },
  setup() {
    const formRef = ref()
    const router = useRouter()
    const state = reactive({
      loading: true,
      drawerShow: false,
      modalVisible: false,
      searchText: '',
      drawerTitle: '文件存储配置详情',
      activeKey: 'tab1',
      akList: [],
      dataList: [],
      allSmsServer: [],
      allSmsTpl: [],
      allEmailServer: [],
      allEmailTpl: [],
      allMWServer: [],
      listQuery: {
        pageNo: 1,
        pageSize: 15,
        title: ''
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      pagination: {
        pageSizeOptions: ['15', '30', '50'],
        showSizeChanger: true,
        total: 1,
        showTotal: (total) => `共 ${total} 条数据`,
        pageSize: 15,
        current: 1
      },
      columns: [
        {
          title: 'ID',
          dataIndex: '_id'
        },
        {
          title: '标题',
          dataIndex: 'title'
        },
        {
          title: '存储平台',
          dataIndex: 'platform_title'
        },
        {
          title: '配置状态',
          dataIndex: 'status',
          slots: { customRender: 'status' }
        },
        {
          title: '添加时间',
          dataIndex: 'create_time'
        },
        {
          title: '操作',
          width: '150px',
          slots: { customRender: 'action' }
        }
      ]
    })
    onMounted(() => {
      getDataList()
      getServerDataList()
    })
    function getServerDataList() {
      getAllServerList({}).then((res) => {
        state.allSmsServer = res
      })
      getAllTplList({}).then((res) => {
        state.allSmsTpl = res
      })
      getEmailServerList({}).then((res) => {
        state.allEmailServer = res
      })
      getAllEmailTpl({}).then((res) => {
        state.allEmailTpl = res
      })
      getAllItem({}).then((res) => {
        state.allMWServer = res
      })
    }

    function handleTableChange(e) {
      state.loading = true
      state.pagination.pageSize = e.pageSize
      state.listQuery.pageSize = e.pageSize
      state.listQuery.pageNo = e.current
      state.pagination.current = e.current
      getDataList()
    }
    function resetSecret() {
      FormState.server_secret = randomString(64)
    }

    const FormState = reactive<any>({
      _id: '',
      title: '',
      platform: '',
      aliyun_is_internal_upload_bool: '',
      aliyun_is_define_url_bool: '',
      aliyun_region: '',
      aliyun_stylename: '',
      server_secret: '',
      aliyun_web_url: '',
      aliyun_bucket: '',
      aliyun_key_secret: '',
      aliyun_key_id: '',
      status: 1
    })
    const FormRule = {
      title: [{ required: true, message: '请输入标题', trigger: ['blur', 'change'] }],
      status: [{ required: true, message: '请输选择配置状态', trigger: ['blur', 'change'] }]
    }

    watch(
      () => FormState.platform,
      () => {
        getAkList()
        state.searchText = ''
      }
    )
    function getAkList() {
      getAllAkList({ platform: FormState.platform, title: state.searchText }).then((res) => {
        state.akList = res
      })
    }
    function searchInput(v) {
      state.searchText = v
      getAkList()
    }

    function reloadList() {
      state.loading = true
      state.listQuery.pageNo = 1
      state.pagination.current = 1
      getDataList()
    }

    function searchSubmit() {
      state.loading = true
      state.listQuery.pageNo = 1
      state.pagination.current = 1
      getDataList()
    }
    function file_server_copy(itemData) {
      for (let item in FormState) {
        FormState[item] = ''
      }
      state.drawerTitle = '复制文件存储配置'
      for (let item in itemData) {
        if (item != '_id' && item != 'server_secret') {
          let copyTips = item == 'title' ? ' - 复制' : ''
          FormState[item] = itemData[item] + copyTips
        }
      }
      state.drawerShow = true
    }

    function getDataList() {
      getServerList(state.listQuery).then((res) => {
        state.loading = false
        state.dataList = res
        state.pagination.total = res.totalCount
      })
    }
    function file_server_edit(res) {
      state.drawerTitle = '编辑文件存储配置'
      for (let item in FormState) {
        FormState[item] = ''
      }
      for (let item in res) {
        FormState[item] = res[item]
      }
      state.drawerShow = true
    }
    function addNewData() {
      for (let item in FormState) {
        FormState[item] = ''
      }
      state.drawerTitle = '新增文件存储配置'
      state.drawerShow = true
    }
    function file_server_delete(data) {
      Modal.confirm({
        title: '确认永久删除本配置?',
        content: '【' + data._id + '】',
        okType: 'danger',
        okText: '确认删除',
        onOk() {
          delServerItem({ id: data._id }).then((res) => {
            if (res.code === 200) {
              state.loading = true
              getDataList()
              requestSuccess(res)
            } else {
              requestFailed(res)
            }
          })
        }
      })
    }
    const addServer = () => {
      formRef.value
        .validate()
        .then(() => {
          editServerInfo(FormState).then((res) => {
            if (res.code === 200) {
              requestSuccess(res)
              formRef.value.resetFields()
              state.loading = true
              state.drawerShow = false
              reloadList()
            } else {
              requestFailed(res)
            }
          })
        })
        .catch(() => {
          return false
        })
    }
    return {
      ...toRefs(state),
      handleTableChange,
      reloadList,
      resetSecret,
      searchSubmit,
      file_server_delete,
      formRef,
      addServer,
      FormState,
      FormRule,
      searchInput,
      addNewData,
      router,
      inArray,
      file_server_edit,
      file_server_copy,
      getDataList
    }
  }
})
</script>

<style scoped></style>
